<template>
  <div id="app">
    <!--面包屑-->
    <div class="bread" style="width: 100%;height: 30px;">
      <div class="bread_content" style="margin: auto">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>培训通后台管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

    </div>
    <!--列表展示-->
    <div style="width: 100%;height: 500px;background-color: white;padding-top: 20px">
      <div style="width: 1200px;height: 430px;margin: auto;">
        <!--添加用户-->
          <div class="add_content">
            <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加用户</el-button>
          </div>
        <div class="table">
          <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
            <el-table-column prop="id" label="用户编号" width="150"></el-table-column>
            <el-table-column prop="username" label="用户账号" width="180"></el-table-column>
            <el-table-column prop="password" label="用户密码"></el-table-column>
            <el-table-column prop="phone" label="用户电话"></el-table-column>
            <el-table-column prop="memo" label="备注"></el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页-->
      <div style="margin-left: 23px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
    <!--添加页面-->
    <el-dialog title="输入信息" :visible.sync="dialogFormVisible">
      <el-form >
        <el-form-item label="用户账号：" :label-width="formLabelWidth">
          <el-input v-model="User.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码：" :label-width="formLabelWidth">
          <el-input v-model="User.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户电话：" :label-width="formLabelWidth">
          <el-input v-model="User.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备  注：" :label-width="formLabelWidth">
          <el-input v-model="User.memo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser()">添 加</el-button>
      </div>
    </el-dialog>
    <!--修改信息界面-->
    <el-dialog  title="修改信息" :visible.sync="updateFormVisible">
      <el-form >
        <el-form-item label="用户账号：" :label-width="formLabelWidth">
          <el-input v-model="Inform.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码：" :label-width="formLabelWidth">
          <el-input v-model="Inform.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户电话：" :label-width="formLabelWidth">
          <el-input v-model="Inform.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备  注：" :label-width="formLabelWidth">
          <el-input v-model="Inform.memo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser()">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: "User",
      methods: {
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
          console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
          console.log(this.currentPage)  //点击第几页
        },

        /*查询所有用户*/
        findAll(){//查询所有
          let _this = this
          this.$axios.get("http://localhost:8066/user/getUser").then(function(res){
            _this.tableData = res.data
            console.log(_this.tableData)
          }).catch(function (err) {
            alert('查询失败')
          })
        },
        /*添加用户*/
        addUser(){
          if(!this.User.username){alert('请输入用户名称');return false}
          if(!this.User.password){alert('请输入用户密码');return false}
          if(!this.User.phone){alert('请输入联系方式');return false}
          if(!this.User.memo){alert('请输入备注');return false}
          console.log(this.User)
          let _this = this
          this.$axios.post("http://localhost:8066/user/setUser",this.User).then(function () {
            //清空本次保存数据
            alert("用户信息添加成功！")
            _this.User = {};
            _this.dialogFormVisible = false
            _this.findAll();
          }).catch(function (err) {
            alert("用户信息添加失败，请稍后再试")
          })
        },
        /*根据id查询用户*/
        handleEdit(id){
          this.updateFormVisible=true
          let _this = this
          this.$axios.get("http://localhost:8066/user/getUserById/"+id).then(function(res){
            _this.Inform = res.data
            console.log(res.data)
          }).catch(function (err) {
            alert('查询失败')
          })
        },
        /*更新用户*/
        updateUser(){
          let _this = this
          // 发送axios请求，根据查询一个
          this.$axios.post("http://localhost:8066/user/updateUser",_this.Inform).then(function (res) {
            alert('用户信息修改成功!')
            _this.updateFormVisible = false
            _this.findAll();
          }).catch(function (err) {
          })
        },
        /*删除用户*/
        handleDelete(id){
          let _this = this
          console.log(id)
          if(window.confirm('确定要删除用户吗？')){
            // 发送axios请求，根据查询一个
            this.$axios.post("http://localhost:8086/user/deletedById/"+id).then(function () {
              _this.findAll();
              alert("用户删除成功！")
            }).catch(function (err) {
              console.log(id)
              alert("删除失败,请联系管理员！")
            })
          }
        }
      },
      data() {
        return {
          dialogFormVisible: false,//添加页面
          updateFormVisible:false,//修改页面
          formLabelWidth: '100px',
          currentPage:1, //初始页
          pageSize:6,    //每页的数据
          User:{},  //添加用户中转站
          Inform:{},//查询的单个用户存储
          tableData: [{}],
        }
      },
      //初始化阶段 brforeCreate 内部事件 生命周期
      created(){
        this.findAll();
      }
    }

</script>

<style scoped>
</style>
